<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{ total }} 条</span>
        </template>

        <template #right>
          <el-button type="warning" size="small" @click="handleExcelImport">excel导入</el-button>
          <el-button type="danger" size="small" @click="handleExcelExport">excel导出</el-button>
          <el-button
            v-if="$check('POINT_USER_ADD')"
            type="primary"
            size="small"
            @click="isShow = true"
          >新增员工</el-button>
        </template>
      </page-tools>

      <el-card v-loading="loading" style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" sortable type="index" width="100" :index="indexFn" />
          <el-table-column label="头像">
            <template #default="{ row }">
              <!-- {{ row.staffPhoto }} -->
              <!--
                1. 有地址但是失效了  v-imgerror  错图
                2. 没有地址         默认图
               -->
              <img
                v-imgerror="errorImg"
                class="img"
                :src="row.staffPhoto || defaultImg"
                alt=""
                @click="handleOpenImg(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" sortable />
          <el-table-column label="手机号" prop="mobile" sortable />
          <el-table-column label="工号" prop="workNumber" sortable />
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="formatFn" sortable />
          <!-- <el-table-column label="聘用形式">
            <template #default="{row}">
              {{ row.formOfEmployment === 1 ? '正式' : '试用' }}
            </template>
          </el-table-column> -->
          <el-table-column label="部门" prop="departmentName" sortable />
          <el-table-column label="入职时间" prop="timeOfEntry" :formatter="formatTimeFn" sortable />
          <el-table-column label="操作" sortable fixed="right" width="280">
            <template #default="{row}">
              <el-button :disabled="!$check('POINT_USER_LOOK')" type="text" size="small" @click="$router.push('/employees/detail/' + row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="handleAssign(row.id)">角色</el-button>
              <el-button :disabled="!$check('POINT_USER_DELETE')" type="text" size="small" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 20px">
          <el-pagination
            style="float: right"
            :current-page="page"
            :page-sizes="[1,2,3,4,5,6,7,8,9,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

      </el-card>

      <AddEmployee :is-show.sync="isShow" @refresh="getUserList" />

      <!-- 图片的二维码弹窗 -->
      <!-- el-dailog 他一直在页面中 只是隐藏了 -->
      <el-dialog
        width="300px"
        title="二维码预览"
        :visible="imgShow"
        @close="imgShow = false"
      >
        <div style="text-align: center">
          <!-- 二维码的容器 -->
          <canvas ref="box" />
        </div>
      </el-dialog>

      <!-- 分配角色 -->
      <AssignRole :is-show.sync="assignRoleShow" :user-id="userId" />
    </div>
  </div>
</template>

<script>
// 生成二维码 qrcode
// 1. 下载qrcode
// 2. 导入qrcode
import QrCode from 'qrcode'
// 2. QrCode.toCanvas(放二维码的容器, 信息)  用于绘制二维码
// 容器有要求 必须是个canvas画布 html5新出的标签 专门用于绘制复杂图像

import { reqDelEmployee, reqGetUserList } from '@/api/employee'
import AddEmployee from './components/AddEmployee.vue'
import dayjs from 'dayjs'
import obj from '@/constant/employees'
import AssignRole from './components/AssignRole.vue'
// import errorImg from '@/assets/common/bigUserHeader.png'

// 直接加载不好 => 用户可能没点按钮 做导出
// import { export_json_to_excel } from '@/vendor/Export2Excel'
// const {hireType} = obj
export default {
  name: 'Employees',
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      page: 1,
      size: 10,
      list: [],
      total: 0,
      loading: false,
      isShow: false,
      errorImg: 'https://img1.baidu.com/it/u=2770306599,1961697444&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678467600&t=4d687ddf107b4afd7acd8e938636422d',
      defaultImg: 'https://img1.baidu.com/it/u=165825062,3994374384&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1678467600&t=6e5937d991d3bcf3a7161f98b8b7c6b9',
      imgShow: false,
      assignRoleShow: false,
      userId: '' // 记录分配角色时点击的用户id
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 1. 封装到utils中去 将来任何页面想要检查按钮权限 先导入方法
    // 2. Vue.prototype.$check = ...   继承(高级中的高级)
    // checkBtnPerm(code) {
    //   // 用于检查某个按钮是否有权限
    //   return this.$store.getters.points.includes(code)
    // },
    indexFn(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    async getUserList() {
      this.loading = true
      const { data: { rows, total }} = await reqGetUserList(this.page, this.size)
      // console.log(res)
      this.list = rows
      this.total = total
      this.loading = false
    },
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getUserList()
    },
    // 这个函数的返回值用于控制每个单元格的展示
    formatFn(row, column, cellValue, index) {
      // cellValue 这个是单元格原本的值
      // console.log(row, column, cellValue, index)
      // return cellValue === 1 ? '正式' : '使用'
      // 临时处理
      const res = obj.hireType.find(item => item.id === +cellValue)
      return res ? res.value : '未知'
    },
    formatTimeFn(row, column, cellValue, index) {
      // console.log(cellValue)
      // cellValue '2018-11-02' 1123431234234
      // moment  dayjs 使用姿势完全一致
      // moment(xxx).format('YYYY年MM月DD日')
      // dayjs(xxx).format('YYYY年MM月DD日')
      return dayjs(cellValue).format('YYYY年MM月DD日')
    },
    del(id) {
      this.$confirm('确认要删除该员工么?', '温馨提示').then(async() => {
        await reqDelEmployee(id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // 做了分页的渲染 一定要记得 本页最后一条的处理!!!
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.getUserList()
      }).catch(() => {
        console.log('取消')
      })
    },
    transData(rows, headersRelations, headersArr) {
      // 将传入的rows(对象型数组) 变为 二维数组
      const arr = []

      rows.forEach(item => {
        // item 每个用户的对象数据
        const temp = []

        headersArr.forEach(v => {
          const englishKey = headersRelations[v]
          // item[englishKey] 就是某用户本身的某个信息
          const val = item[englishKey]
          if (englishKey === 'formOfEmployment') {
            const res = obj.hireType.find(type => type.id === +val)
            temp.push(res ? res.value : '未知')
          } else if (['timeOfEntry', 'correctionTime'].includes(englishKey)) {
          // } else if (englishKey === 'timeOfEntry' || englishKey === 'correctionTime') {
            temp.push(dayjs(val).format('YYYY年MM月DD日'))
          } else {
            temp.push(val)
          }
        })

        arr.push(temp)
      })

      return arr
    },
    async handleExport() {
      const multiHeader = [['姓名', '主要信息', '', '其他', '', '', '部门']]
      const merges = ['A1:A2', 'B1:C1', 'D1:F1', 'G1:G2']
      const headersArr = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      const headersRelations = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }

      // 先发请求获取所有员工数据
      const { data: { rows }} = await reqGetUserList(1, this.total)
      // console.log('对象数组', rows)

      // 小数组由表头决定的!!!
      // 大数组由rows决定的!!!
      // const list = [
      //   ['管理员', '189089809', '2018', 1, '2018', '9002', '总裁办'],
      //   []
      // ]
      // 1. 遍历 rows
      // 2. 遍历 headersArr
      // 3. 换键
      // 4. 换值
      const list = this.transData(rows, headersRelations, headersArr)
      // console.log('我处理好的二维数组', list)

      // 注意: 如果需要导出excel 其实就是需要导入一个插件 vendor export2excel
      // export_json_to_excel
      // 懒加载的方式 封装了一层promise
      import('@/vendor/Export2Excel').then(res => {
        // console.log(res)
        // 导出
        res.export_json_to_excel({
          multiHeader, // 多表头
          merges, // 配置合并
          // 表头
          header: headersArr,
          // 表格主体数据  二维数组 大数组套小数组
          // 数组是有序的!!!
          // 1.每一条数据必须是个数组 因为张三的每条信息都是有顺序的!!!
          // 2.张三 李四也是有顺序的!!!
          // data: [
          //   ['张三', '19', '1008', '聪明'],
          //   ['王五', '21', '1010', '还可以'],
          //   ['李四', '20', '1009', '帅气']
          // ],
          data: list,
          // 文件名
          filename: '员工列表',
          autoWidth: true, // 宽度自适应
          bookType: 'xlsx' // 文件类型
        })
      })
    },
    async handleOpenImg(url) {
      // console.log(url)
      // 没有图片 那么直接不打开弹窗
      if (!url) return
      this.imgShow = true // 开启弹窗 弹窗中的结构懒渲染的, 并不是立即渲染的
      // this.$nextTick(() => {
      //   console.log(this.$refs.box)
      // })

      // 获取到了url  基于这个url 可以生成一个二维码展示 =>
      // console.log(url)
      // this.$nextTick(() => {
      //   // 需要等视图更新之后(canvas生成之后)
      //   QrCode.toCanvas(this.$refs.box, url)
      // })

      // this.$nextTick().then(() => {
      //   QrCode.toCanvas(this.$refs.box, url)
      // })

      await this.$nextTick()
      QrCode.toCanvas(this.$refs.box, url)
    },
    handleAssign(id) {
      this.assignRoleShow = true
      this.userId = id
    },
    handleExcelExport() {
      if (!this.$check('POINT_EXPORT_EXCEL')) {
        this.$message.error('不好意思, 您没有这个权限, 请联系管理员添加')
        return
      }

      this.handleExport()
    },
    handleExcelImport() {
      if (!this.$check('POINT_IMPORT_EXCEL')) {
        this.$message.error('不好意思, 您没有这个权限, 请联系管理员添加')
        return
      }

      this.$router.push('/import?type=user')
    }
  }
}
</script>

<style lang='scss' scoped>
.employees-container {
  .img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}

</style>
